<template>
  <div class="home" :class="{show: loaded}">
    <van-nav-bar :border="false" fixed custom-style="background: transparent;">
      <template #title>
        <div class="title">
          江苏中恩网络科技有限公司
        </div>
      </template>
    </van-nav-bar>
    <!-- 占位高度 -->
    <div :style="{height: navHeight}" class="bg"></div>

    <ze-scroll :exclude-tabbar="true" @scrolltolower="handleScrolltolower">
      <div class="main">
        <!-- 通知公告 -->
        <Announcement />
        <!-- 最近使用 -->
        <common-used ref="zeNewsRef" :types="newsTypes" :common-list="commonList" />
      </div>
    </ze-scroll>
    <pop ref="infoDialog" :info-id="infoId" />
  </div>
</template>

<script>
import Announcement from './announcement.vue'
import ZeScroll from '@/components/ze-scroll/index.vue'
import { getDeviceInfo, getSubInfo, removeSubInfo } from '@/utils/storage'
import CommonUsed from '@/pages/home/common-used/index.vue'
import { subMsg } from '@/apis/office'
import { GET_SUB_INFO, emitter } from '@/utils/emitter'
import pop from '@/pages/webview/pop.vue'

export default {
  components: {
    ZeScroll,
    CommonUsed,
    Announcement,
    pop,
  },
  data() {
    return {
      loaded: false,
      navHeight: '0px',
      newsTypes: [{
        label: '常用',
        value: 1,
      }, {
        label: '全员',
        value: 2,
      }],
      commonList: [],
      infoId: '',
    }
  },
  mounted() {
    this.calcNavHeight()
    emitter.on(GET_SUB_INFO, (item) => {
      this.infoId = item.infoId
      if (item.linkPath == '\'common-used\'') {
        this.$refs.infoDialog.open()
      } else {
        this.$refs.infoDialog.close()
      }
    })
  },
  onShow() {
    this.commonList = uni.getStorageSync('menu_recentlyUsed')
    this.removeRepeat()
  },
  beforeDestroy() {
    emitter.off(GET_SUB_INFO)
  },
  methods: {
    removeRepeat() {
      const newArr = []
      for (let i = 0; i < this.commonList.length; i++) {
        if (newArr.indexOf(this.commonList[i].formId) == -1) {
          newArr.push(this.commonList[i].formId)
        } else {
          this.commonList.splice(i, 1)
          i--
        };
      };
    },
    handleScrolltolower() {
      // this.$refs.zeNewsRef.loadMore()
    },
    calcNavHeight() {
      const {
        navbarHeight,
        statusBarHeight,
      } = getDeviceInfo()
      this.navHeight = `${navbarHeight + statusBarHeight + 10}px`
      this.loaded = true
    },
    handleClickLeft() {
      uni.navigateTo({
        url: '/pages/customer-infor/index/index',
      })
    },
  },
}
</script>

<style lang="scss" scoped>
	.home {
		opacity: 0;

		&.show {
			opacity: 1;
		}
	}
	.title {
		color: #fff;
		width: 148px;
		margin: 0 auto;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.banner {
		width: 345px;
		height: 140px;
		margin: 0 auto;
		display: block;
	}
	.main {
		margin-top: 10px;
		background-color: #fff;
		.entrances {
			margin-top: 10px;
			display: flex;
			justify-content: space-between;
			.entrance {
				width: 167px;
				height: 78px;
				background-size: cover;
				background-position: right 0 top 0;
				background-repeat: no-repeat;
				border-radius: 3px;
				color: #6391BF;
				box-sizing: border-box;
				padding: 15px 10px;
				.entrance-title {
					font-size: 16px;
					font-weight: 500;
					line-height: 16px;
				}
				.entrance-desc {
					margin-top: 10px;
					font-size: 10px;
					line-height: 10px;
				}
			}
		}
	}
	.bg {
		background: linear-gradient(180deg, #23479B 0%, #36B1D4 100%);
		backdrop-filter: blur(40px);
		width: 100%;
	}
	.entrances,
	.van-bar {
		padding: 0 15px;
	}
</style>
